<template>
	<el-row class="IoSpeakingWriting-box">
		<el-col :span="24" class="IoSpeakingWriting-page">
			<div id="Cpu" class="linePage ScaleCSSViewport_unzoom" v-loading="loading"
				element-loading-spinner="el-icon-loading" element-loading-background="#021033"></div>

		</el-col>
		<el-col :span="24" class="IoSpeakingWriting-file">
			<span class="LoadFile">CPU使用率 ：{{ this.read ? this.read + " %" : "0" + " %" }}
			</span>
		</el-col>
	</el-row>
</template>>

<script>
	import {
		fetchData
	} from "@/api/index.js";
	import bus from "common/bus.js";
	import {
		Line
	} from "@antv/g2plot";

	export default {
		data() {
			return {
				selectedMonID: "",
				timerName: "CpuAndIo",
				timerEventName: "timerCpuAndIo",
				timerInterval: 1000 * 30,
				lineItem: "",
				lineData: [],
				read: "",
				loading: false,
				postData: {
					filters: {
						monid: "",
						ip: "",
					},
				},
				getNum: 30,
			};
		},
		props: {
			initData: null
		},
		created() {

			bus.$on("MysqlInitChart", (msg) => {
				this.resetData();
				//  console.log(msg[0].data)
				//  console.log(msg[1].IP)
				this.selectedMonID = msg[0].data.filter((item) => {
					return item.IP.includes(msg[1].IP);
				});

				// this.selectedMonID = msg;



				this.initGetData();
				// this.lineItem.changeData([]);


			});

			bus.$emit("timerNewTodo", {
				name: this.timerName,
				eventName: this.timerEventName,
				interval: this.timerInterval,
				intervalNow: 0,
			});
			bus.$on(this.timerEventName, msg => {
				if (msg.isGetData) {

					this.initGetData();
				}
			});
		},
		mounted() {
			this.initLine();
		},
		computed: {},
		methods: {
			initGetData() {
				// this.loading=true
				// console.log(this.selectedMonID)
				if (this.selectedMonID.length > 0) {
					let _postData = {
						opera: "CpuUsageLine",
						filters: {
							monid: this.selectedMonID[0].MONID,
							pointNum: this.getNum,
						},
					};
					// console.log(_postData)
					fetchData({
						postData: JSON.stringify(_postData),
					}).then((res) => {


						this.lineData = res.data.map((item) => {
							return {
								Date: item.RECORD_TIME,
								scales: Number((100 - item.CPU_IDLE).toFixed(1)),
							};
						});



						// if (res.data.length === 0) {
						//   // console.log(this.lineItem)

						//   // this.lineItem.update({ data: [] });

						// } else {

						this.lineItem.changeData(this.lineData);
						this.read = res.data.length > 0 ? Number((100 - [...res.data].pop().CPU_IDLE).toFixed(1)) :
							0

						// }
					}).finally(_ => {});
				} else {
					this.lineItem.changeData([]);
					this.loading = false
				}


			},


			resetData() {
				this.lineData = [];
				this.read = "";
			},
			initLine() {

				this.lineItem = new Line("Cpu", {
					data: this.lineData,
					padding: "auto",
					xField: "Date",
					yField: "scales",
					height: 145 * this.ZOOM,

					xAxis: false,
					areaStyle: () => {
						return {
							fill: 'l(270) 0:#ffffff 0.5:#7ec2f3 1:#FF0000',
						}
					},

					tooltip: {
						formatter: (datum) => {
							return {
								name: "使用率",
								value: datum.scales + "%"
							};
						},
					},
				});

				this.lineItem.render();
			},
		},
		beforeDestroy() {
			bus.$emit("timerNewTodo", {
				name: this.timerName,
			});
			this.lineItem.destroy();
			bus.$off('SqlServerInitChart')
		},
	};
</script>
<style scoped>
	.IoSpeakingWriting-box {
		height: 100%;
	}

	.IoSpeakingWriting-page {
		height: 70%;
		width: 100%;
	}

	.linePage {
		height: 100%;
		width: 100%;
	}

	.IoSpeakingWriting-file {
		height: 30%;
		width: 100%;
		text-align: center;

	}
</style>
